<template>
    <div class="wrap">
        <div class="container">
            <TopBreadCrumb></TopBreadCrumb>
            <div class="user_center_content">
                <!-- 左侧菜单 -->
                <LeftNavMenu></LeftNavMenu>
                <!-- 左侧菜单结束 -->
                <!-- 右侧内容开始  -->
                <div class="right_user_content">
                    <div class="right-title">
                        <div class="left">授权开通</div>
                        <div class="right text-blue" @click="openDialog">
                            新增授权信息</div>
                    </div>
                    <div class="contract-content" v-loading="loading">
                        <div class="contract-list">
                            <el-table
                                :data="empowerData.data"
                                style="width: 100%">
                                <el-table-column
                                    prop="e_name"
                                    label="企业名称">
                                </el-table-column>
                                <el-table-column
                                    prop="address"
                                    label="授权地址"
                                    width="300"
                                    >
                                </el-table-column>
                                <el-table-column
                                    prop="cooperate_type"
                                    label="合作类型"
                                    align="center"
                                    width="120">
                                </el-table-column>
                                <el-table-column
                                    prop="status"
                                    label="状态"
                                    align="center"
                                    width="150">
                                    <template slot-scope="scope">
                                        <span v-if="scope.row.status == 1">授权成功</span>
                                        <span v-if="scope.row.status == 0">授权审核中</span>
                                        <span v-else-if="scope.row.status == -1">审核失败</span>
                                    </template>
                                </el-table-column>
                                <el-table-column
                                    prop="operation"
                                    label="操作"
                                    align="center"
                                    width="130">
                                    <template slot-scope="scope">
                                        <nuxt-link :to="`/agency/accreditShow/${scope.row.id}`" v-if="scope.row.status == 1">查看授权书</nuxt-link>
                                        <nuxt-link :to="`/agency/accreditShow/${scope.row.id}`" v-else>查看</nuxt-link>
                                    </template>
                                </el-table-column>
                            </el-table>

                        </div>
                        <CustomPagination :total="empowerData.total" :page.sync="query.page" :pageSize.sync="query.pageSize" @pagination="LoadEmpowerData" :hidden="pageHidden"></CustomPagination>
                    </div>
                </div>
                <!-- 右侧内容结束 -->
            </div>
        </div>
        <!-- 新增授权信息 -->
        <el-dialog
            title="新增授权信息"
            :visible.sync="dialogAddVisible"
            :close-on-click-modal="false"
            width="800px"
            top="2%">
            <div class="dialog-content add-enterprise">
                <el-form ref="form" status-icon :show-message="false" :model="form" label-width="150px" label-position="left">
                    <el-form-item label="授权企业名称" required prop="factory_id">
                        <el-select v-model="form.factory_id" filterable placeholder="请选择或输入授权企业名称" @change="updateFactory">
                            <el-option :label="item.name" :value="item.id" v-for="(item, index) in factoryList" :key="index"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="被授权企业名称" required prop="enterprise_id">
                        <el-select v-model="form.enterprise_id" filterable placeholder="请选择或输入被授权企业名称">
                            <el-option :label="item.name" :value="item.id" v-for="(item, index) in enterpriseList" :key="index"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="授权产品" required prop="empower_product_ids">
                        <el-select v-model="form.empower_product_ids" multiple filterable placeholder="请选择或输入授权产品">
                            <el-option :label="item.title" :value="item.id" v-for="(item, index) in productList" :key="index"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="合作类型" required prop="cooperate_type">
                        <el-select v-model="form.cooperate_type" placeholder="请选择合作类型">
                            <el-option :label="item" :value="item" v-for="(item,index) in empowerList" :key="index"></el-option>
                        </el-select>
                    </el-form-item>
                    <div class="form-item-block">
                        <el-form-item label="合作区域" required prop="cooperate_province_id">
                            <el-select v-model="form.cooperate_province_id" placeholder="省/直辖市" @change="changeProvince('cooperate')">
                                <el-option :label="item.province_name" :value="item.province_id" v-for="(item, index) in provinceList" :key="index"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="" required prop="cooperate_city_id" ref="cooperate_city_id" label-width="10px">
                            <el-select v-model="form.cooperate_city_id"  placeholder="市" @change="changeCity('cooperate')">
                                <el-option :label="item.city_name" :value="item.city_id" v-for="(item, index) in cooperateCity" :key="index"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="" required prop="cooperate_county_id" ref="cooperate_county_id">
                            <el-select v-model="form.cooperate_county_id" placeholder="区/县"  @change="changeCounty('cooperate')">
                                <el-option :label="item.county_name" :value="item.county_id" v-for="(item, index) in cooperateCounty" :key="index"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="" required prop="cooperate_town_id" ref="cooperate_town_id" label-width="10px">
                            <el-select v-model="form.cooperate_town_id" placeholder="乡镇/街道" >
                                <el-option :label="item.town_name" :value="item.town_id" v-for="(item, index) in cooperateTown" :key="index"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="" required prop="cooperate_hospital">
                            <el-input v-model="form.cooperate_hospital" placeholder="请输入医院" ></el-input>
                            <!-- <el-select v-model="form.qu" placeholder="请选择医院" style="width:50%">
                                <el-option label="企业" value="1"></el-option>
                                <el-option label="企业" value="2"></el-option>
                            </el-select> -->
                        </el-form-item>
                        <el-form-item label="" required prop="cooperate_hospital_department" label-width="10px">
                            <el-input v-model="form.cooperate_hospital_department" placeholder="请输入科室" style=""></el-input>
                            <!-- <el-select v-model="form.jie" placeholder="请选择科室" style="width:50%">
                                <el-option label="企业" value="1"></el-option>
                                <el-option label="企业" value="2"></el-option>
                            </el-select> -->
                        </el-form-item>
                    </div>
                    <div class="form-item-block">
                        <el-form-item label="详细地址" required prop="province_id">
                            <el-select v-model="form.province_id" placeholder="省/直辖市"  @change="changeProvince('address')">
                                <el-option :label="item.province_name" :value="item.province_id" v-for="(item, index) in provinceList" :key="index"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="" required ref="city_id" prop="city_id" label-width="10px">
                            <el-select v-model="form.city_id"  placeholder="市" @change="changeCity('address')" >
                                <el-option :label="item.city_name" :value="item.city_id" v-for="(item, index) in city" :key="index"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="" required ref="county_id" prop="county_id">
                            <el-select v-model="form.county_id"  placeholder="区/县" @change="changeCounty('address')">
                                <el-option :label="item.county_name" :value="item.county_id" v-for="(item, index) in county" :key="index"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="" required ref="town_id" prop="town_id" label-width="10px">
                            <el-select v-model="form.town_id"  placeholder="乡镇/街道" >
                                <el-option :label="item.town_name" :value="item.town_id" v-for="(item, index) in town" :key="index"></el-option>
                            </el-select>
                        </el-form-item>
                    </div>
                    <el-form-item label="" required prop="address">
                        <el-input v-model="form.address" placeholder="请输入详细地址信息，如道路、门牌号、小区、楼栋号、单元等信息"></el-input>
                    </el-form-item>
                    <div class="form-item-block">
                        <el-form-item label="营业执照" prop="business_license" required>
                            <CustomImageUpload v-model="form.business_license"></CustomImageUpload>
                        </el-form-item>
                        <el-form-item label="医疗器械许可证" required label-width="120px" prop="medical_device_license">
                            <CustomImageUpload v-model="form.medical_device_license"></CustomImageUpload>
                        </el-form-item>
                    </div>
                    <el-form-item label="二类备案证明" prop="filings_prove">
                        <CustomImageUpload v-model="form.filings_prove"></CustomImageUpload>
                    </el-form-item>
                   
                    <el-form-item label="备注" prop="remark">
                        <el-input type="textarea" show-word-limit maxlength="200" :row="6" v-model="form.remark" placeholder="请输入详细信息"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button class="btn-main" @click="onSubmit" :loading="addLoading">提交审核</el-button>
                    </el-form-item>

                </el-form>
            </div>
        </el-dialog>
        <!-- 新增授权信息结束 -->
    </div>
</template>

<script>
import api from "@/api/enterprise";
import empowerApi from "@/api/empower";
import factoryApi from "@/api/factory";
import productApi from "@/api/product";
import commonApi from "@/api/common";

export default {
    data() {
        return {
            listData: [],
            dialogAddVisible: false,
            form: {
                factory_id: null, // 授权企业
                enterprise_id: null, // 被授权企业
                empower_product_ids: [], // 授权产品ids
                cooperate_type: null, // 授权类型

                cooperate_province_id: null,
                cooperate_city_id: null,
                cooperate_county_id: null,
                cooperate_town_id: null,

                cooperate_hospital: "", // 医院
                cooperate_hospital_department: "", // 医院科室

                province_id: null,
                city_id: null,
                county_id: null,
                town_id: null,
                address: "", // 详细地址
                business_license: "", // 营业执照
                medical_device_license: "", // 医疗器械许可证
                filings_prove: "", // 备案证明
                remark: "", // 备注
            },
            query: {
                page: 1,
                pageSize: 2,
                order: "desc",
                sort: "create_time"
            },
            empowerData: {
                total: 0,
                data: []
            },
            pageHidden: true,
            empowerList: [], // 合作类型
            factoryList: [], // 授权企业
            enterpriseList: [], // 被授权企业
            productList: [], // 授权产品

            provinceList: [], //省份数据

            cooperateCity: [], // 合作城市数据
            cooperateCounty: [], // 合作区县数据
            cooperateTown: [], // 合作街道数据

            city: [], // 地址城市数据
            county: [], // 地址区县数据
            town: [], // 地址街道数据
            addLoading: false,
            loading: false
        };
    },
    methods: {
        onSubmit() {
            var _this = this;
            _this.$refs.form.validate((valid) => {
                if (_this.form.business_license.length == 0) {
                    this.$message.error("请上传营业执照")
                    return;
                }
                if (_this.form.medical_device_license.length == 0) {
                    this.$message.error("请上传医疗器械许可证")
                    return;
                }
                if (valid) {
                    _this.addLoading = true;
                    empowerApi.AddEmpower(_this.form)
                        .then((res) => {
                            _this.$message.success("新增授权信息成功");
                            _this.dialogAddVisible = false;
                            _this.addLoading = false;
                            _this.LoadEmpowerData();
                        }).catch((err) => {
                            _this.addLoading = false;
                        })
                }
            })
        },
        // 打开弹窗
        openDialog: function () {
            this.dialogAddVisible = true;
            if (this.$refs.form) {
                this.$refs.form.resetFields();
            }
        },
        // 改变授权企业
        updateFactory: function () {
            // 获取授权企业的产品信息
            var input = {
                factory_id: this.form.factory_id
            }
            // 重置授权产品
            this.form.empower_product_ids = [];
            productApi.GetProductList(input)
                .then((res) => {
                    this.productList = res.data;
                })
        },
        // 加载授权开通列表
        LoadEmpowerData: function () {
            var _this = this;
            _this.loading = true;
            empowerApi.GetEmpowerPageList(_this.query)
                .then((res) => {
                    _this.pageHidden = false;
                    _this.empowerData = res.data;
                    _this.loading = false;
                    console.log(_this.empowerData.total);
                    if (_this.query.pageSize >= _this.empowerData.total) {
                        _this.pageHidden = true;
                    }
                })
        },
        // 加载合作类型
        LoadEmpowerList: function () {
            empowerApi.GetEmpowerList()
                .then((res) => {
                    this.empowerList = res.data;
                })
        },
        // 加载授权厂商
        LoadFactoryList: function () {
            var _this = this;
            factoryApi.GetFactoryList({})
                .then((res) => {
                    _this.factoryList = res.data;
                })
        },
        // 加载被授权企业
        LoadEnterpriseList: function () {
            var _this = this;
            api.GetEnterpriseSelect()
                .then((res) => {
                    _this.enterpriseList = res.data;
                })
        },
        // 加载省份数据
        LoadProvinceList: function () {
            var _this = this;
            commonApi.GetAllProvinces()
                .then((res) => {
                    _this.provinceList = res.data;
                })
        },
        // 加载城市数据
        LoadAllProvincesList: function (type, id, changeType) {
            var input = {
                type: type,
                id: id
            }
            commonApi.GetAllProvinces(input)
                .then((res) => {
                    if (changeType == "cooperate") {
                        if (type == "city") {
                            this.cooperateCity = res.data;
                            this.$refs.cooperate_city_id.resetField();
                            this.$refs.cooperate_county_id.resetField();
                        } else if(type == "county") {
                            this.cooperateCounty = res.data;
                            this.$refs.cooperate_county_id.resetField();
                        } else if (type == "town") {
                            this.cooperateTown = res.data;
                        }

                        this.$refs.cooperate_town_id.resetField();
                    }
                    else if (changeType == "address")
                    {
                        if (type == "city") {
                            this.city = res.data;
                            this.$refs.city_id.resetField();
                            this.$refs.county_id.resetField();
                        } else if(type == "county") {
                            this.county = res.data;
                            this.$refs.county_id.resetField();
                        } else if (type == "town") {
                            this.town = res.data;
                        }

                        this.$refs.town_id.resetField();
                    }
                })
        },
        // 改变省份
        changeProvince: function (changeType) {
            var id = this.form.cooperate_province_id
            if (changeType == "address") {
                id = this.form.province_id;
            }
            this.LoadAllProvincesList("city", id, changeType);
        },
        // 改变市
        changeCity: function (changeType) {
            var id = this.form.cooperate_city_id
            if (changeType == "address") {
                id = this.form.city_id;
            }
            this.LoadAllProvincesList("county", id, changeType);
        },
        // 改变区县
        changeCounty: function (changeType) {
            var id = this.form.cooperate_county_id
            if (changeType == "address") {
                id = this.form.county_id;
            }
            this.LoadAllProvincesList("town", id, changeType);
        },
    },
    mounted: function () {
        this.LoadEmpowerData();
        this.LoadEmpowerList();
        this.LoadFactoryList();
        this.LoadEnterpriseList();
        this.LoadProvinceList();
    }
};
</script>
<style>

</style>